<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Code - 你的AI编程助手</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Montserrat:wght@800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="nav-container">
                <div class="logo">
                    <h1>Claude <span>Code</span></h1>
                </div>
                <ul class="nav-menu">
                    <li class="nav-item">
                        <a href="#home" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#install" class="nav-link">安装</a>
                    </li>
                    <li class="nav-item">
                        <a href="#commands" class="nav-link">命令</a>
                    </li>
                    <li class="nav-item">
                        <a href="#tips" class="nav-link">技巧</a>
                    </li>
                </ul>
                <div class="hamburger">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </div>
        </nav>
    </header>

    <section id="home" class="hero">
        <div class="hero-container">
            <div class="hero-content">
                <h1 class="hero-title">Claude Code</h1>
                <p class="hero-subtitle">强大的AI编程助手，助你轻松编写高质量代码</p>
                <div class="hero-buttons">
                    <a href="#install" class="btn primary">开始使用</a>
                    <a href="#commands" class="btn secondary">查看命令</a>
                </div>
            </div>
            <div class="hero-image">
                <div class="code-window">
                    <div class="code-header">
                        <div class="code-buttons">
                            <span class="code-btn close"></span>
                            <span class="code-btn minimize"></span>
                            <span class="code-btn maximize"></span>
                        </div>
                        <div class="code-title">claude_code.py</div>
                    </div>
                    <div class="code-body">
                        <pre><code>def hello_claude():
    print("Hello, Claude Code!")
    # AI powered coding assistant
    return "Ready to code"</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="install" class="install section">
        <div class="container">
            <h2 class="section-title">安装 <span>Claude Code</span></h2>
            <div class="install-steps">
                <div class="install-step">
                    <div class="step-number">1</div>
                    <h3>下载 Claude Code</h3>
                    <p>从官方网站下载最新版本的 Claude Code，支持 Windows、macOS 和 Linux 系统。</p>
                </div>
                <div class="install-step">
                    <div class="step-number">2</div>
                    <h3>安装依赖</h3>
                    <p>确保你的系统已安装 Python 3.8+ 和必要的依赖库。</p>
                    <div class="code-block">
                        <pre><code>pip install claude-code</code></pre>
                    </div>
                </div>
                <div class="install-step">
                    <div class="step-number">3</div>
                    <h3>配置环境</h3>
                    <p>设置 API 密钥并配置 Claude Code 以适应你的开发环境。</p>
                    <div class="code-block">
                        <pre><code>claude-code --config api_key=your_api_key</code></pre>
                    </div>
                </div>
                <div class="install-step">
                    <div class="step-number">4</div>
                    <h3>开始编码</h3>
                    <p>启动 Claude Code 并开始享受 AI 辅助编程体验。</p>
                    <div class="code-block">
                        <pre><code>claude-code --start</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="commands" class="commands section">
        <div class="container">
            <h2 class="section-title">常用 <span>命令</span></h2>
            <div class="commands-grid">
                <div class="command-card">
                    <div class="command-icon">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3>代码生成</h3>
                    <p><code>/code</code> - 根据描述生成代码</p>
                    <p class="command-desc">让 Claude Code 根据你的需求生成相应的代码片段</p>
                </div>
                <div class="command-card">
                    <div class="command-icon">
                        <i class="fas fa-bug"></i>
                    </div>
                    <h3>调试代码</h3>
                    <p><code>/debug</code> - 分析并修复代码错误</p>
                    <p class="command-desc">自动检测代码中的错误并提供修复建议</p>
                </div>
                <div class="command-card">
                    <div class="command-icon">
                        <i class="fas fa-comment"></i>
                    </div>
                    <h3>解释代码</h3>
                    <p><code>/explain</code> - 解释代码功能</p>
                    <p class="command-desc">详细解释任何代码片段的工作原理</p>
                </div>
                <div class="command-card">
                    <div class="command-icon">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <h3>优化代码</h3>
                    <p><code>/optimize</code> - 优化代码性能</p>
                    <p class="command-desc">改进代码结构和性能，提高执行效率</p>
                </div>
                <div class="command-card">
                    <div class="command-icon">
                        <i class="fas fa-book"></i>
                    </div>
                    <h3>文档生成</h3>
                    <p><code>/docs</code> - 生成代码文档</p>
                    <p class="command-desc">为你的代码自动生成专业文档</p>
                </div>
                <div class="command-card">
                    <div class="command-icon">
                        <i class="fas fa-language"></i>
                    </div>
                    <h3>翻译代码</h3>
                    <p><code>/translate</code> - 在编程语言间翻译</p>
                    <p class="command-desc">将代码从一种编程语言翻译为另一种</p>
                </div>
            </div>
        </div>
    </section>

    <section id="tips" class="tips section">
        <div class="container">
            <h2 class="section-title">使用 <span>技巧</span></h2>
            <div class="tips-content">
                <div class="tip-card">
                    <h3><i class="fas fa-lightbulb"></i> 明确描述需求</h3>
                    <p>在请求 Claude Code 生成代码时，尽量提供详细和明确的需求描述，包括输入输出格式、边界条件等。</p>
                </div>
                <div class="tip-card">
                    <h3><i class="fas fa-project-diagram"></i> 分解复杂问题</h3>
                    <p>对于复杂问题，将其分解为多个小的子问题，逐个请求 Claude Code 解决，这样可以获得更准确的结果。</p>
                </div>
                <div class="tip-card">
                    <h3><i class="fas fa-code-branch"></i> 指定编程语言和版本</h3>
                    <p>在请求代码时，明确指定所需的编程语言和版本，如"Python 3.9"或"JavaScript ES6"。</p>
                </div>
                <div class="tip-card">
                    <h3><i class="fas fa-list"></i> 要求示例和测试用例</h3>
                    <p>除了代码本身，还可以要求 Claude Code 提供使用示例和测试用例，帮助你更好地理解和验证代码。</p>
                </div>
                <div class="tip-card">
                    <h3><i class="fas fa-exclamation-triangle"></i> 审查生成的代码</h3>
                    <p>虽然 Claude Code 很强大，但仍需审查生成的代码，确保其符合安全和性能要求。</p>
                </div>
                <div class="tip-card">
                    <h3><i class="fas fa-sync"></i> 迭代优化</h3>
                    <p>通过多次交互和反馈，让 Claude Code 逐步优化代码，直到满足你的所有需求。</p>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <h2>Claude <span>Code</span></h2>
                    <p>你的AI编程助手</p>
                </div>
                <div class="footer-links">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="#home">首页</a></li>
                        <li><a href="#install">安装</a></li>
                        <li><a href="#commands">命令</a></li>
                        <li><a href="#tips">技巧</a></li>
                    </ul>
                </div>
                <div class="footer-social">
                    <h3>关注我们</h3>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-github"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-discord"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 Claude Code. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>